<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Juicer todolist</title>
    <!-- 引入 juicer.js -->
    <script src="juicer.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .name-list{
            cursor:pointer;
        }
        .name_todolist_hidden{
            display:none;
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="app">
            <h2 class="text-center">Hello World!</h2>
            <h3 class="text-center">My name is Juicer todolist.</h2>
            <p class="input-group">
                <button data-toggle="tooltip" data-placement="top" title="点击这儿" class="btn btn-default title_show_handle">点击<span class="title_show_handle_text name_todolist_hidden">显示</span><span class="title_show_handle_text">隐藏</span></button>
            </p>
            <div class="name_todolist">
                <p class="input-group">
                    <input type="text" placeholder="输入名字" class="form-control input_name" />
                    <span class="input-group-btn"><button type="button" class="btn btn-default add_name_handle">确认</button></span>
                </p>
                <!-- 定义模板 开始 -->
                <!-- 定义模板渲染节点 -->
                <ul id="drawing-node" class="list-group name-list"></ul>
                <!-- 定义模板 -->
                <script id="t:data_list" type="text/html">
                    {@each data_list as item,key}
                        <li data-toggle="tooltip" data-placement="top" title="点击删除 ${item.title}" class="list-group-item delete_handle">${item.title}</li>
                    {@/each}
                </script>
                <!-- 定义模板 结束 -->
            </div>
        </div>
    </div>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

    <script>
        $(function(){
            // console.log('jQuery 测试.');
            // 列表默认数据
            var data={
                data_list:[],
            }
            // 调用 Juicer 函数、生成 模板 对象
            var juicer_tpl=juicer("#t:data_list");
            // Ajax 请求默认数据
            $.ajax({
                url:'../data_list.php',
                type:'get',
                success:function(back){
                    var data_list=back.data;
                    var info=back.info;
                    data.data_list=data_list;
                    var data_list_html=juicer_tpl.render(data);
                    $("#drawing-node").append(data_list_html);
                    console.log(info);
                },
                error:function(){
                    console.log('网络不稳定，加载失败...');
                },
            });
            // 输入框中 value 渲染到 列表里面
            $(".add_name_handle").click(function(){
                var input_name_value=$(".input_name").val();
                if(!input_name_value){
                    return;
                }
                var input_name_value_li=[{
                    title:input_name_value,
                }]
                data.data_list=input_name_value_li;
                var data_list_html=juicer_tpl.render(data);
                $("#drawing-node").append(data_list_html);
                $(".input_name").val('');
            });
            // 点击消失
            $(document).on("click",".delete_handle",function(){
                $(this).next(".tooltip").remove();
                $(this).remove();
            });
            // 隐藏、显示 toggle-class
            $(".title_show_handle").click(function(){
                $(".name_todolist").toggleClass('name_todolist_hidden');
                $(".title_show_handle_text").toggleClass('name_todolist_hidden');
            });
        });
    </script>
    <script>
        // Bootstrap 气泡
        $(function(){
            $(".title_show_handle").tooltip();
        });
        // $(document).on("mouseover","body",function(){
        //     $(".delete_handle").tooltip();
        // });
        $("body").mouseover(function(){
            $(".delete_handle").each(function(){
                $(this).tooltip();
            });
        });
    </script>
</body>
</html>